<template>
    <div class="dp_mask yi-datetimepikcer-wrapper" v-show="selfShow">
        <div class="dp_select showPicker picker-columns">
            <header>
                <button class="nav_left picker-cancel" @click="cancel">取消</button>
                <slot></slot><!-- 这里插入标题的内容 -->
                <button class="nav_right picker-ok" @click="confirm">确定</button>
            </header>
            <div class="hd">
                <div class="hd-f1 picker-tag" v-if="'123456'.indexOf(this.type.toString()) > -1" :style="{width:itemWidth}">年</div>
                <div class="hd-f1 picker-tag" v-if="'23456'.indexOf(this.type.toString()) > -1" :style="{width:itemWidth}">月</div>
                <div class="hd-f1 picker-tag" v-if="'3456'.indexOf(this.type.toString()) > -1" :style="{width:itemWidth}">日</div>
                <div class="hd-f1 picker-tag" v-if="'456789'.indexOf(this.type.toString()) > -1" :style="{width:itemWidth}">时</div>
                <div class="hd-f1 picker-tag" v-if="'5689'.indexOf(this.type.toString()) > -1" :style="{width:itemWidth}">分</div>
                <div class="hd-f1 picker-tag" v-if="'69'.indexOf(this.type.toString()) > -1" :style="{width:itemWidth}">秒</div>
            </div>
            <div class="bd" id="wrapper-parent">
                <div class="bd-f1 picker-wrapper" v-if="'123456'.indexOf(this.type.toString()) > -1" id="yearId" :ref="yearId" :style="{width:itemWidth}"
                    v-on:touchstart.stop.prevent="touchStartItem($event, containerOptions.yearContainer, 'Y')" 
                    v-on:touchmove.stop.prevent="touchMoveItem($event, containerOptions.yearContainer, 'Y')" 
                    v-on:touchend.stop.prevent="touchEndItem($event, containerOptions.yearContainer, 'Y')"
                >
                    <ul v-bind:style="{
                        transition:yearTransition,
                        transform:yearTransform}">
                        <li></li>
                        <li></li>
                        <li v-for="item in years" :key="item">
                            {{item}}
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="bd-f1 picker-wrapper" v-if="'23456'.indexOf(this.type.toString()) > -1" id="monthId" :ref="monthId" :style="{width:itemWidth}"
                    v-on:touchstart.stop.prevent="touchStartItem($event, containerOptions.monthContainer, 'm')" 
                    v-on:touchmove.stop.prevent="touchMoveItem($event, containerOptions.monthContainer, 'm')" 
                    v-on:touchend.stop.prevent="touchEndItem($event, containerOptions.monthContainer, 'm')"
                >
                    <ul v-bind:style="{
                        transition:monthTransition,
                        transform:monthTransform}">
                        <li></li>
                        <li></li>
                        <li v-for="item in months" :key="item">
                            {{item}}
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="bd-f1 picker-wrapper"  v-if="'3456'.indexOf(this.type.toString()) > -1" id="dateId" :ref="dateId" :style="{width:itemWidth}"
                    v-on:touchstart.stop.prevent="touchStartItem($event, containerOptions.dateContainer, 'd')" 
                    v-on:touchmove.stop.prevent="touchMoveItem($event, containerOptions.dateContainer, 'd')" 
                    v-on:touchend.stop.prevent="touchEndItem($event, containerOptions.dateContainer, 'd')"
                >
                    <ul v-bind:style="{
                        transition:dateTransition,
                        transform:dateTransform}">
                        <li></li>
                        <li></li>
                        <li v-for="item in dates" :key="item">
                            {{item}}
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="bd-f1 picker-wrapper" v-if="'456789'.indexOf(this.type.toString()) > -1" id="hourId" :ref="hourId" :style="{width:itemWidth}"
                    v-on:touchstart.stop.prevent="touchStartItem($event, containerOptions.hourContainer, 'H')" 
                    v-on:touchmove.stop.prevent="touchMoveItem($event, containerOptions.hourContainer, 'H')" 
                    v-on:touchend.stop.prevent="touchEndItem($event, containerOptions.hourContainer, 'H')"
                >
                    <ul v-bind:style="{
                        transition: hourTransition,
                        transform: hourTransform}">
                        <li></li>
                        <li></li>
                        <li v-for="item in hours" :key="item">
                            {{item}}
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="bd-f1 picker-wrapper" v-if="'5689'.indexOf(this.type.toString()) > -1" id="minuteId" :ref="minuteId" :style="{width:itemWidth}"
                    v-on:touchstart.stop.prevent="touchStartItem($event, containerOptions.minuteContainer, 'i')" 
                    v-on:touchmove.stop.prevent="touchMoveItem($event, containerOptions.minuteContainer, 'i')" 
                    v-on:touchend.stop.prevent="touchEndItem($event, containerOptions.minuteContainer, 'i')"
                >
                    <ul v-bind:style="{
                        transition: minuteTransition,
                        transform: minuteTransform}">
                        <li></li>
                        <li></li>
                        <li v-for="item in minutes" :key="item">
                            {{item}}
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="bd-f1 picker-wrapper" v-if="'69'.indexOf(this.type.toString()) > -1" id="secondId" :ref="secondId" :style="{width:itemWidth}"
                    v-on:touchstart.stop.prevent="touchStartItem($event, containerOptions.secondContainer, 's')" 
                    v-on:touchmove.stop.prevent="touchMoveItem($event, containerOptions.secondContainer, 's')" 
                    v-on:touchend.stop.prevent="touchEndItem($event, containerOptions.secondContainer, 's')"
                >
                    <ul v-bind:style="{
                        transition: secondTransition,
                        transform: secondTransform}">
                        <li></li>
                        <li></li>
                        <li v-for="item in seconds" :key="item">
                            {{item}}
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="sel_top"></div>
                <div class="sel_bottom"></div>
                <div class="sel_middle"></div>
            </div>
        </div>
    </div>
</template>

<script>
    //当前时间
    let currentDate = new Date();
    let currentDateDetail = {
        year: currentDate.getFullYear(),
        month: currentDate.getMonth() + 1,
        date: currentDate.getDate(),
        hour: currentDate.getHours(),
        minute: currentDate.getMinutes(),
        second: currentDate.getSeconds()
    };
    currentDateDetail.month = currentDateDetail.month < 10 ? '0' + currentDateDetail.month : currentDateDetail.month;
    currentDateDetail.date = currentDateDetail.date < 10 ? '0' + currentDateDetail.date : currentDateDetail.date;
    currentDateDetail.hour = currentDateDetail.hour < 10 ? '0' + currentDateDetail.hour : currentDateDetail.hour;
    currentDateDetail.minute = currentDateDetail.minute < 10 ? '0' + currentDateDetail.minute : currentDateDetail.minute;
    currentDateDetail.second = currentDateDetail.second < 10 ? '0' + currentDateDetail.second : currentDateDetail.second;

    export default {
        name: "v-datetime-picker",
        props: {
            /**
             * picker模式，可选值为1-9
             * 1-6分别表示年月日时分秒
             * 7-9分别表示时分秒
             */
            type: {
                type: Number,
                required: true,
                default: 5 //默认：年-月-日 时:分
            },
            title: {
                type: String,
                default: "请选择日期"
            },
            isShow: {
                type: Boolean,
                required: true,
                default: false
            },
            maxYear: {
                type: Number,
                default: currentDateDetail.year + 99 //默认最长年份当前年份向后99年
            },
            minYear: {
                type: Number,
                default: currentDateDetail.year - 99 //默认最前年份当前年份向前99年
            },
            separator: {
                type: String,
                default: "-" //默认日期的分隔符
            },
            value: {
                type: String,
                default: function() {
                    let separatorFlag = this.separator;
                    let defaultValue = currentDateDetail.year + separatorFlag + currentDateDetail.month + separatorFlag + currentDateDetail.date + ' ' + currentDateDetail.hour + ':' + currentDateDetail.minute + ':' + currentDateDetail.second;
                    return defaultValue; //插件默认日期为当前日期
                }
            },
            yearId: {
                type: String,
                default: function() {
                    return 'yi-picker-year-id-' + this._uid;
                }
            },
            monthId: {
                type: String,
                default: function() {
                    return 'yi-picker-month-id-' + this._uid;
                }
            },
            dateId: {
                type: String,
                default: function() {
                    return 'yi-picker-date-id-' + this._uid;
                }
            },
            hourId: {
                type: String,
                default: function() {
                    return 'yi-picker-hour-id-' + this._uid;
                }
            },
            minuteId: {
                type: String,
                default: function() {
                    return 'yi-picker-minute-id-' + this._uid;
                }
            },
            secondId: {
                type: String,
                default: function() {
                    return 'yi-picker-second-id-' + this._uid;
                }
            }
        },
        data() {
            let years = this.getRangeArray(this.minYear, this.maxYear);//最小-最大年份年一共N年
            let months = this.getRangeArray(1, 12, true);//1年12个月
            let seletedDateDetail = this.getDateDetail();//选择的时间，用于判断是否为闰年，闰年的2月有29天
            let dates = this.getRangeArray(1, this.getMonthMaxDay(seletedDateDetail.year, seletedDateDetail.month), true);//1年365天，闰年366天
            let hours = this.getRangeArray(0, 23, true);//1天24小时，24点等于第二天的0点
            let minutes = this.getRangeArray(0, 59, true);//1小时60分钟，01:60等于02:00
            let seconds = this.getRangeArray(0, 59, true);//1分钟60秒，01:01:60等于01:02:00
            let containerOptions = {
                yearContainer: this.getContainer('Y'),
                monthContainer: this.getContainer('m'),
                dateContainer: this.getContainer('d'),
                hourContainer: this.getContainer('H'),
                minuteContainer: this.getContainer('i'),
                secondContainer: this.getContainer('s'),
            };
            // containerOptions = this.getHeights(containerOptions);
            return {
                years: years,
                months: months,
                dates: dates,
                hours: hours,
                minutes: minutes,
                seconds: seconds,

                year: seletedDateDetail.year,
                month: seletedDateDetail.month,
                date: seletedDateDetail.date,
                hour: seletedDateDetail.hour,
                minute: seletedDateDetail.minute,
                second: seletedDateDetail.second,

                yearTransition: 'none',
                yearTransform: 'none',

                monthTransition: 'none',
                monthTransform: 'none',

                dateTransition: 'none',
                dateTransform: 'none',

                hourTransition: 'none',
                hourTransform: 'none',
                
                minuteTransition: 'none',
                minuteTransform: 'none',

                secondTransition: 'none',
                secondTransform: 'none',

                containerOptions: containerOptions,
                childShow: this.isShow
            };
        },
        beforeCreate() {},
        created(){
            // this.childShow = '2';//测试监听属性
        },
        mounted() {},
        computed: {
            selfShow: {
                // 返回面板显示状态
                get() {
                    this.init();// 触发vue侦听器
                    return this.isShow;
                },
                // 当selfShow被主动改变时，修改childShow的值
                set(val) {
                    this.childShow = val;
                }
            },
            itemWidth:{
                get(){
                    let width = '';
                    switch(this.type.toString()){
                        case '1':
                        case '7':
                            width = '100%';
                            break;
                        case '2':
                        case '8':
                            width = 100/2 + '%';
                            break;
                        case '3':
                        case '9':
                            width = 100/3 + '%';
                            break;
                        case '4':
                            width = 100/4 + '%';
                            break;
                        case '5':
                            width = 100/5 + '%';
                            break;
                        case '6':
                            width = 100/6 + '%';
                            break;
                    }
                    return width;
                }
            }
        },
        watch: {
            // childShow发生变化时被执行
            childShow(currentVal) {
                if (currentVal) {
                    if (this.childShow) {
                        this.containerOptions = this.getHeights(this.containerOptions);//取得步长等信息
                        let beforeSelected = this.getDateDetail();
                        if('123456'.indexOf(this.type.toString()) > -1){
                            let yearDefaultLen = this.containerOptions.yearContainer.stepLen * (this.years.indexOf(beforeSelected.year));
                            this.setScrollTo('Y', this.containerOptions.yearContainer, yearDefaultLen);
                        }
                        if('23456'.indexOf(this.type.toString()) > -1){
                            let monthDefaultLen = this.containerOptions.monthContainer.stepLen * (this.months.indexOf(beforeSelected.month));
                            this.setScrollTo('m', this.containerOptions.monthContainer, monthDefaultLen);
                        }
                        if('3456'.indexOf(this.type.toString()) > -1){
                            let dateDefaultLen = this.containerOptions.dateContainer.stepLen * (this.dates.indexOf(beforeSelected.date));
                            this.setScrollTo('d', this.containerOptions.dateContainer, dateDefaultLen);
                        }
                        if('456789'.indexOf(this.type.toString()) > -1){
                            let hourDefaultLen = this.containerOptions.hourContainer.stepLen * (this.hours.indexOf(beforeSelected.hour));
                            this.setScrollTo('H', this.containerOptions.hourContainer, hourDefaultLen);
                        }
                        if('5689'.indexOf(this.type.toString()) > -1){
                            let minuteDefaultLen = this.containerOptions.minuteContainer.stepLen * (this.minutes.indexOf(beforeSelected.minute));
                            this.setScrollTo('i', this.containerOptions.minuteContainer, minuteDefaultLen);
                        }
                        if('69'.indexOf(this.type.toString()) > -1){
                            let secondDefaultLen = this.containerOptions.secondContainer.stepLen * (this.minutes.indexOf(beforeSelected.second));
                            this.setScrollTo('s', this.containerOptions.secondContainer, secondDefaultLen);
                        }
                    }
                }
            }
        },
        methods: {
            init(){
                this.childShow = this.isShow;// 触发vue侦听器
            },
            touchStartItem(e, containerOption, columnsType) {
                if (containerOption) {
                    containerOption.startTime = parseInt(new Date().getTime());
                    let touches = e.touches ? e.touches[0] : e;
                    containerOption.startPageY = touches.pageY; //起始触摸点
                    let transitionStyle = 'none';
                    this.setTransition(columnsType, true, transitionStyle);
                }
            },
            touchMoveItem(e, containerOption, columnsType) {
                if (containerOption) {
                    let timestamp = parseInt(new Date().getTime());
                    let touches = e.touches ? e.touches[0] : e;
                    // 滚动高度
                    let diffPageY = touches.pageY - containerOption.startPageY;
                    let movePageY = diffPageY + containerOption.offsetTop;

                    // 最少移动10px
                    if (timestamp - containerOption.endTime > 300 && Math.abs(diffPageY) < 10) {
                        return;
                    }

                    // 超过边缘滚动有阻力
                    if (movePageY > 0) {
                        movePageY /= 3;
                    } else if (Math.abs(movePageY) > Math.abs(containerOption.scrollHeight)) {
                        movePageY = Math.abs(containerOption.scrollHeight) - Math.abs(movePageY);
                        movePageY = movePageY / 3 - containerOption.scrollHeight;
                    }
                    let transformStyle = 'translate(0, ' + movePageY + 'px)';
                    this.setTransition(columnsType, false, transformStyle);
                }
            },
            touchEndItem(e, containerOption, columnsType) {
                if (containerOption) {
                    containerOption.endTime = parseInt(new Date().getTime());
                    let duration = containerOption.endTime - containerOption.startTime;
                    let touches = e.changedTouches ? e.changedTouches[0] : e;
                    let offsetHeight = touches.pageY - containerOption.startPageY; //本次滚动偏移位置
                    containerOption.offsetTop += offsetHeight; //记录总偏移位置
                    if ((containerOption.offsetTop > 0) || (Math.abs(containerOption.offsetTop) > Math.abs(containerOption.scrollHeight))) {
                        //上边缘&下边缘
                        let transitionStyle = 'all 500ms';
                        this.setTransition(columnsType, true, transitionStyle);
                    } else if (duration < 300) { // 惯性滚动
                        let speed = Math.abs(offsetHeight) / duration; // 惯性移动速度
                        let moveTime = duration * speed * 20; // 惯性滚动时间(动画)
                        moveTime = moveTime > 2000 ? 2000 : moveTime;
                        containerOption.offsetTop += offsetHeight * speed * 10; // 惯性移动距离
                        let transitionStyle = "all " + moveTime + "ms " + "cubic-bezier(0.1, 0.57, 0.1, 1)";
                        this.setTransition(columnsType, true, transitionStyle);
                    } else {
                        // columnControl.transition = 'all 500ms';
                        let transitionStyle = 'all 500ms';
                        this.setTransition(columnsType, true, transitionStyle);
                    }
                    if (containerOption.offsetTop > 0) {
                        containerOption.offsetTop = 0;
                    } else if (Math.abs(containerOption.offsetTop) > Math.abs(containerOption.scrollHeight)) {
                        containerOption.offsetTop = -containerOption.scrollHeight;
                    }

                    // 步长模式
                    if (containerOption.options.step && containerOption.stepLen > 0) {
                        let nowEndY = containerOption.offsetTop;
                        let h = Math.abs(nowEndY % containerOption.stepLen); //滚动多余不足step的高度
                        let halfHeight = containerOption.stepLen / 2; //step一半的高度

                        //超过行一半的高度，则滚动一行
                        let moveY = (h >= halfHeight) ? (nowEndY - containerOption.stepLen + h) : (nowEndY + h);
                        let index = parseInt(Math.abs(moveY) / containerOption.stepLen);
                        this.setSeletedValue(columnsType, index); //设置选中的item值
                        containerOption.offsetTop = moveY; // 将正确的项移动到显示区域
                    }
                    let transformStyle = 'translate(0, ' + containerOption.offsetTop + 'px)';
                    this.setTransition(columnsType, false, transformStyle);
                    if ('23456'.indexOf(this.type.toString()) > -1) {
                        let monthMaxDay = this.getMonthMaxDay(this.year, this.month);
                        if (parseInt(this.date) > monthMaxDay) {
                            //超过一个月最长的日期
                            this.date = monthMaxDay;
                            let moveLen = (monthMaxDay - 1) * this.containerOptions.dateContainer.stepLen;
                            this.setScrollTo('d', this.containerOptions.dateContainer, moveLen, 500);
                        }
                    }
                }
            },
            getRangeArray(from, to, formateTwo) {
                let result = [];
                for (let i = from; i <= to; i++) {
                    if (formateTwo) {
                        i = i < 10 ? '0' + i : i.toString(); //小于10的 添加0格式化成两位
                    } else {
                        i = i.toString();
                    }
                    result.push(i);
                }
                return result;
            },
            getDateTimeObject(timestamp, fmt="YYYY-mm-dd HH:ii:ss") {
                let date = new Date(timestamp);
                let options = {
                    "m": date.getMonth()+1, // 月
                    "d": date.getDate(), // 日
                    "H": date.getHours(), // 时
                    "i": date.getMinutes(), // 分
                    "s": date.getSeconds(), // 秒
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒 
                };
                // 修正月日时分秒字符长度
                for (let key in options){
                    if (new RegExp("(" + key + "+)").test(fmt)){
                        options[key] = (RegExp.$1.length == 1) ? (options[key]) : (("00" + options[key]).substr(("" + options[key]).length));
                    }
                }
                // 年，放在最后，防止年份长度异常
                if (/(Y+)/.test(fmt)){
                    options["Y"] = (date.getFullYear() + "").substr(4 - RegExp.$1.length);
                } 
                return options;
            },
            getDateDetail() {
                let result = {year: '', month: '', date: '', hour: '', minute: '', second: ''};
                if (this.value) {
                    let dateTime = this.getDateTimeObject(this.value, "YYYY-mm-dd HH:ii:ss");
                    result.year = dateTime.Y;
                    result.month = dateTime.m;
                    result.date = dateTime.d;
                    result.hour = dateTime.H;
                    result.minute = dateTime.i;
                    result.second = dateTime.s;
                }
                // console.log("设定的时间是：", this.value);
                return result;
            },
            getContainer(arg){
                let options = {};
                switch(arg){
                    case 'Y':
                        if('123456'.indexOf(this.type.toString()) > -1){
                            options = this.getContainerOptions();
                        }
                        break;
                    case 'm':
                        if('23456'.indexOf(this.type.toString()) > -1){
                            options = this.getContainerOptions();
                        }
                        break;
                    case 'd':
                        if('3456'.indexOf(this.type.toString()) > -1){
                            options = this.getContainerOptions();
                        }
                        break;
                    case 'H':
                        if('456789'.indexOf(this.type.toString()) > -1){
                            options = this.getContainerOptions();
                        }
                        break;
                    case 'i':
                        if('5689'.indexOf(this.type.toString()) > -1){
                            options = this.getContainerOptions();
                        }
                        break;
                    case 's':
                        if('69'.indexOf(this.type.toString()) > -1){
                            options = this.getContainerOptions();
                        }
                        break;
                }
                return options;
            },
            getContainerOptions() {
                return {
                    options: {
                        step: true, // 是否开启步长模式
                        defaultPlace: 0 // 默认列表位置
                    },
                    startPageY: 0,
                    startTime: 0,
                    endTime: 0,
                    offsetTop: 0, //上一次滚动位置
                    stepLen: 1, //步长
                    scrollerHeight: 0,
                    scrollHeight: 0,
                    childNodeHeight: 0,
                    itemHeight: 0,
                    transition: '',
                    transform: ''
                }
            },
            // 获取容器
            getHeights(containerOptions) {
                if (containerOptions) {
                    if('123456'.indexOf(this.type.toString()) > -1){
                        containerOptions = this.setHeights(containerOptions, 'Y');
                    }
                    if('23456'.indexOf(this.type.toString()) > -1){
                        containerOptions = this.setHeights(containerOptions, 'm');
                    }
                    if('3456'.indexOf(this.type.toString()) > -1){
                        containerOptions = this.setHeights(containerOptions, 'd');
                    }
                    if('456789'.indexOf(this.type.toString()) > -1){
                        containerOptions = this.setHeights(containerOptions, 'H');
                    }
                    if('5689'.indexOf(this.type.toString()) > -1){
                        containerOptions = this.setHeights(containerOptions, 'i');
                    }
                    if('69'.indexOf(this.type.toString()) > -1){
                        containerOptions = this.setHeights(containerOptions, 's');
                    }
                }
                return containerOptions;
            },
            /**
             * options
             * container
             * filed 
             */
            setHeights(options, filed){
                if(!options){
                    return options;
                }
                let node;
                switch(filed){
                    case 'Y':
                        options.yearContainer.scrollerHeight = this.$refs[this.yearId].clientHeight;
                        node = this.$refs[this.yearId].childNodes[0];
                        options.yearContainer.itemHeight = node.clientHeight;
                        options.yearContainer.scrollHeight = node.clientHeight - options.yearContainer.scrollerHeight;
                        options.yearContainer.transition = this.yearTransition;
                        options.yearContainer.transform = this.yearTransform;
                        options.yearContainer.stepLen = node.childNodes.length > 0 ? node.childNodes[0].clientHeight : 0;
                        break;
                    case 'm':
                        options.monthContainer.scrollerHeight = this.$refs[this.monthId].clientHeight;
                        node = this.$refs[this.monthId].childNodes[0];
                        options.monthContainer.itemHeight = node.clientHeight;
                        options.monthContainer.scrollHeight = node.clientHeight - options.monthContainer.scrollerHeight;
                        options.monthContainer.transition = this.monthTransition;
                        options.monthContainer.transform = this.monthTransform;
                        options.monthContainer.stepLen = node.childNodes.length > 0 ? node.childNodes[0].clientHeight : 0;
                        break;
                    case 'd':
                        options.dateContainer.scrollerHeight = this.$refs[this.dateId].clientHeight;
                        node = this.$refs[this.dateId].childNodes[0];
                        options.dateContainer.itemHeight = node.clientHeight;
                        options.dateContainer.scrollHeight = node.clientHeight - options.dateContainer.scrollerHeight;
                        options.dateContainer.transition = this.dateTransition;
                        options.dateContainer.transform = this.dateTransform;
                        options.dateContainer.stepLen = node.childNodes.length > 0 ? node.childNodes[0].clientHeight : 0;
                        break;
                    case 'H':
                        options.hourContainer.scrollerHeight = this.$refs[this.hourId].clientHeight;
                        node = this.$refs[this.hourId].childNodes[0];
                        options.hourContainer.itemHeight = node.clientHeight;
                        options.hourContainer.scrollHeight = node.clientHeight - options.hourContainer.scrollerHeight;
                        options.hourContainer.transition = this.hourTransition;
                        options.hourContainer.transform = this.hourTransform;
                        options.hourContainer.stepLen = node.childNodes.length > 0 ? node.childNodes[0].clientHeight : 0;
                        break;
                    case 'i':
                        options.minuteContainer.scrollerHeight = this.$refs[this.minuteId].clientHeight;
                        node = this.$refs[this.minuteId].childNodes[0];
                        options.minuteContainer.itemHeight = node.clientHeight;
                        options.minuteContainer.scrollHeight = node.clientHeight - options.minuteContainer.scrollerHeight;
                        options.minuteContainer.transition = this.minuteTransition;
                        options.minuteContainer.transform = this.minuteTransform;
                        options.minuteContainer.stepLen = node.childNodes.length > 0 ? node.childNodes[0].clientHeight : 0;
                        break;
                    case 's':
                        options.secondContainer.scrollerHeight = this.$refs[this.secondId].clientHeight;
                        node = this.$refs[this.secondId].childNodes[0];
                        options.secondContainer.itemHeight = node.clientHeight;
                        options.secondContainer.scrollHeight = node.clientHeight - options.secondContainer.scrollerHeight;
                        options.secondContainer.transition = this.minuteTransition;
                        options.secondContainer.transform = this.minuteTransform;
                        options.secondContainer.stepLen = node.childNodes.length > 0 ? node.childNodes[0].clientHeight : 0;
                        break;
                }
                return options;
            },
            /**
             * 设定选中时间
             */
            setSeletedValue(columnsType, index) {
                switch (columnsType) {
                    case 'Y':
                        this.year = this.years[index];
                        break;
                    case 'm':
                        this.month = this.months[index];
                        break;
                    case 'd':
                        this.date = this.dates[index];
                        break;
                    case 'H':
                        this.hour = this.hours[index];
                        break;
                    case 'i':
                        this.minute = this.minutes[index];
                        break;
                    case 's':
                        this.second = this.seconds[index];
                        break;
                }
            },
            setScrollTo(columnsType, containerOption, y, moveTime) {
                if (moveTime && moveTime > 0) {
                    let transitionStyle = "all " + moveTime + "ms " + "cubic-bezier(0.1, 0.57, 0.1, 1)";
                    this.setTransition(columnsType, true, transitionStyle);
                } else {
                    this.setTransition(columnsType, true, 'none');
                }
                y = -y;
                containerOption.offsetTop = y;
                let transformStyle = 'translate(0, ' + y + 'px)';
                this.setTransition(columnsType, false, transformStyle);
            },
            checkLeapYear(year) {
                //校验是否闰年
                if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
                    return 1;
                }
                return 0;
            },
            getMonthMaxDay(nowYear, nowMonth) {
                //根据选中年份、月份计算当月最长多少天
                if ('123456'.indexOf(this.type.toString()) > -1) {
                    let leap = this.checkLeapYear(nowYear);
                    let maxMonths = ["01", "03", "05", "07", "08", "10", "12"];

                    let monthMaxDays = 30;
                    if (nowMonth === "02") {
                        monthMaxDays = 28 + leap;
                    } else if (maxMonths.indexOf(nowMonth) > -1) {
                        monthMaxDays = 31;
                    }
                    return monthMaxDays;
                }
            },
            setTransition(columnsType, isTransiton, styleText) {
                switch (columnsType) {
                    case 'Y':
                        if (isTransiton) {
                            this.yearTransition = styleText;
                        } else {
                            this.yearTransform = styleText;
                        }
                        break;
                    case 'm':
                        if (isTransiton) {
                            this.monthTransition = styleText;
                        } else {
                            this.monthTransform = styleText;
                        }
                        break;
                    case 'd':
                        if (isTransiton) {
                            this.dateTransition = styleText;
                        } else {
                            this.dateTransform = styleText;
                        }
                        break;
                    case 'H':
                        if (isTransiton) {
                            this.hourTransition = styleText;
                        } else {
                            this.hourTransform = styleText;
                        }
                        break;
                    case 'i':
                        if (isTransiton) {
                            this.minuteTransition = styleText;
                        } else {
                            this.minuteTransform = styleText;
                        }
                        break;
                    case 's':
                        if (isTransiton) {
                            this.secondTransition = styleText;
                        } else {
                            this.secondTransform = styleText;
                        }
                        break;
                }
            },
            confirm() {
                let result;
                switch(this.type.toString()){
                    case '1': // Y
                        result = this.year;
                        break;
                    case '2': // Y-m
                        result = [this.year, this.month].join("-")
                        break;
                    case '3': // Y-m-d
                        result = [this.year, this.month, this.date].join("-")
                        break;
                    case '4': // Y-m-d H
                        result = [this.year, this.month, this.date].join("-") + ' ' + [this.hour, "00"].join(":")
                        break;
                    case '5': // Y-m-d H:i
                        result = [this.year, this.month, this.date].join("-") + ' ' + [this.hour, this.minute].join(":")
                        break;
                    case '6': // Y-m-d H:i:s
                        result = [this.year, this.month, this.date].join("-") + ' ' + [this.hour, this.minute, this.second].join(":")
                        break;
                    case '7': // H:00
                        result = [this.hour, "00"].join(":")
                        break;
                    case '8': // H:i
                        result = [this.hour, this.minute].join(":")
                        break;
                    case '9': // H:i:s
                        result = [this.hour, this.minute, this.second].join(":")
                        break;
                }
                
                this.$emit('confirm', result);
            },
            cancel() {
                this.$emit('cancel');
            }
        }
    };
</script>

<style>
    body {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    * {
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    ul {
        list-style: none outside none;
    }

    .yi-datetimepikcer-wrapper .picker-wrapper  {
        font-size: 16px;
    }

    .yi-datetimepikcer-wrapper .picker-columns  {
        height: 285px;
    }

    .hd {
        display: -webkit-flex !important;
        display: flex !important;
        position: relative;
    }
    .hd-f1 {
        position: relative;
    }

    .bd {
        display: -webkit-flex !important;
        display: flex !important;
        position: relative;
    }

    .bd-f1 {
        position: relative;
    }

    /*select*/
    .dp_mask {
        overflow: hidden;
        font-size: 15px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 9998;
    }

    .dp_select {
        font-size: 15px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        color: #333;
        background: #D1D5D8;
        z-index: 9999;
        -webkit-transition: 300ms all;
        transition: 300ms all;
    }

    .dp_select>header {
        overflow: hidden;
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background: #F0F1F2;
        -webkit-box-shadow: 0 0 8px #333;
        -moz-box-shadow: 0 0 8px #333;
        box-shadow: 0 0 8px #333;
    }

    .dp_select>header>h1 {
        display: inline-block;
        font-size: 15px;
        font-weight: normal;
    }

    .dp_select>header>button {
        font-size: 15px;
        height: 45px;
        padding: 0 10px;
        border: none;
        outline: none;
        color: #007AFF;
        background: #F0F1F2;
    }

    .dp_select button.nav_left {
        float: left;
    }

    .dp_select button.nav_right {
        float: right;
    }

    .dp_select>p {
        width: 100%;
        line-height: 30px;
        text-align: center;
        font-size: 14px !important;
    }

    .dp_select>p>span {
        display: block;
    }

    /*列表*/
    .dp_select>.hd {
        text-align: center;
        height: 40px;
        line-height: 40px;
    }

    .dp_select>.bd {
        overflow: hidden;
        position: relative;
        height: 200px;
        text-align: center;
    }

    .dp_select>.bd>div.bd-f1 {
        max-width: 100%;
        min-width: 16.6%;
    }

    .dp_select ul {
        line-height: 40px;
    }

    .dp_select ul>li {
        height: 40px;
        color: #2A2B2C;
        padding: 0 10px !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dp_select .sel_middle {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 40px;
        margin-top: -20px;
        pointer-events: none;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
    }

    .dp_select .sel_top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        pointer-events: none;
        background: rgba(209, 213, 216, 0.7);
    }

    .dp_select .sel_bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80px;
        pointer-events: none;
        background: rgba(209, 213, 216, 0.7);
    }
</style>